<template>
  <content-box :title="title" style="height: 304px" :loading="loading">
    <div class="full-width full-height flex justify-between items-center column">
      <progress-box v-for="(item, index) in realtimeList" :key="index" :data="item" :total="total" @toList="toList"/>
    </div>
  </content-box>
</template>

<script>
import contentBox from './content-box'
import progressBox from './progress'
import { getStatisticsState } from 'src/boot/status-monitor/status-overview'
import _ from 'lodash'
export default {
  name: 'job-real-time',
  components: {
    contentBox,
    progressBox
  },
  data () {
    return {
      title: '实时作业状态分布',
      loading: false,
      // 实时作业状态分布
      realtimeJobData: {
        normalDeviceCount: 0, // 正常
        slightSlowDeviceCount: 0, // 轻微落后
        severeDeviceCount: 0, // 严重落后
        idleDeviceCount: 0 // 暂未派工
      },
      workshopId: null,
      lineId: null,
      realtimeList: [{
        label: '正常作业',
        color: 'linear-gradient(90deg, #44D8C6, #5F77FD)',
        count: 0,
        value: 'normalDeviceCount',
        processStatus: 1
      }, {
        label: '稍微落后',
        color: 'linear-gradient(90deg, #E8D127, #F3BC19, #FEAC12)',
        count: 0,
        value: 'slightSlowDeviceCount',
        processStatus: 2
      }, {
        label: '严重落后',
        color: 'linear-gradient(90deg, #FE6D33, #F44941, #EC2449)',
        count: 0,
        value: 'severeDeviceCount',
        processStatus: 3
      }, {
        label: '暂未派工',
        color: 'linear-gradient(90deg, #D3D3D3, #999999)',
        count: 0,
        value: 'idleDeviceCount',
        processStatus: 4
      }],
      total: 0
    }
  },
  methods: {
    toList (data) {
      this.$router.push({
        name: 'statsMonitor',
        params: {
          workshopId: this.workshopId,
          lineId: this.lineId,
          type: data.processStatus
        }
      })
    },
    clearData () {
      this.realtimeList.forEach(item => {
        item.count = 0
      })
    },
    getData (workshopId, lineId) {
      this.workshopId = workshopId
      this.lineId = lineId
      this.loading = true
      Object.assign(this.realtimeJobData, this.$options.data.call(this).realtimeJobData)
      const params = {}
      lineId !== 'all' && (params['lineId'] = lineId)

      // 获取实时作业状态分布
      getStatisticsState(params, workshopId).then(res => {
        this.realtimeJobData = Object.assign({}, this.realtimeJobData, res)
        this.getInfo()
      }).finally(() => {
        this.loading = false
      })
    },
    getInfo () {
      const arr = _.cloneDeep(this.realtimeList)
      _.forEach(this.realtimeJobData, (value, key) => {
        _.find(arr, v => v.value === key).count = value
      })
      this.realtimeList = arr
      this.total = _.sum(arr.map(v => v.count))
    }
  }
}
</script>

<style scoped>

</style>
